<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=CFy3MAfGOOvlPp5XcptDB4aqSPYpj9zY"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/sockjs/0.3.4/sockjs.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <title>行车轨迹</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    var busIcon = new BMap.Icon("http://localhost:8099/bus.png", new BMap.Size(32, 32), {
        imageOffset: new BMap.Size(0, 0)
    });
    var busMark;
    var drawLine = function (map, p1, p2) {
        let polyline = new BMap.Polyline([p1, p2], {strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5});
        map.addOverlay(polyline);
    };
    var map = new BMap.Map("allmap");
    var pointData = [];
    $(document).ready(function() {
        $.ajax({
            url: "/positions?key=1",
            method: "GET",
            dataType: "json",
            success: function (data) {
                data.forEach(e => {
                    pointData.push(new BMap.Point(e.longitude, e.latitude));
                });
                if (pointData.length > 0){
                    map.centerAndZoom(pointData[pointData.length-1], 15);
                    busMark = new BMap.Marker(pointData[pointData.length-1],{icon:busIcon});
                    map.addOverlay(busMark);
                } else {
                    alert("暂无数据");
                }
                map.setCurrentCity("唐山");
                map.enableScrollWheelZoom(true);
                if (pointData.length > 1){
                    for (let i = 1; i < data.length; i++) {
                        drawLine(map, pointData[i-1], pointData[i]);
                    }
                }
                var socket = new SockJS('/ws');
                var stompClient = Stomp.over(socket);
                stompClient.connect({}, function(frame) {
                    stompClient.subscribe("/topic/1", function(e) {
                        let data = JSON.parse(e.body);
                        let point = new BMap.Point(data.longitude, data.latitude);
                        if (pointData.length > 0) {
                            drawLine(map,pointData[pointData.length-1],point);
                            busMark.setPosition(point);
                        } else {
                            map.centerAndZoom(point, 15);
                            busMark = new BMap.Marker(point,{icon:busIcon});
                            map.addOverlay(busMark);
                        }
                        pointData.push(point);
                    });
                });
            }
        });
    });
</script>